<template>
  <div class="app-container">
    <div class="container">
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item style="margin-bottom: 10px;margin-left: 15px">
          <el-input
            v-model=" queryForm.keywords" prefix-icon="el-icon-search" placeholder="项目名称" style="width: 18.75rem"
          @input="onQuerySubmit" />
        </el-form-item>
        <el-form-item style="margin-bottom: 10px">
          <el-button type="primary" icon="el-icon-plus" :loading="loading" @click="handleAdd">新建应用</el-button>
        </el-form-item>
      </el-form>

      <div class="sence-container">
        <SceneCard v-for="(item, index) in tableData" :key="item.id" :class="'sceneCard' + index" :handler="true"
          :sence-info="item" @showMask="showMask('sceneCard' + index,item)" @changeMode="changeMode" @toSubsystem="toSubsystem(item)"
          @click.native="handlePreview(item.id)" />
      </div>
    </div>
    <scene-template-drawer v-if="templateDrawer.visible" :properties="templateDrawer" @closed="close"
      @refresh="load" />
    <div v-if="maskShow" class="maskAll" @click="hideMask" />
    <div v-if="infoDialogShow" class="info-dialog" :style="dialogPosition">
      <div>
        <span><span class="iconfont icon-wenjianjia" style="font-size: 12px;" /> 项目名称:</span>
        <span>{{ projectInfo.name }}</span>
      </div>
      <div style="margin-top: 12px;margin-left: 9px;">
        <span><span class="iconfont icon-danwei" style="font-size: 16px;" /> 所属单位:</span>
        <span>{{ projectInfo.orgName }}</span>
      </div>
      <div>
        <span><span class="iconfont icon-shijian" style="font-size: 15px;" /> 更新时间:</span>
        <span>{{ projectInfo.updateTime }}</span>
      </div>
      <div class="btns">
        <div>
          <span class="iconfont icon-copy" />
          <span @click="handleCopy">复制渲染口令</span>
        </div>
        <div>
          <span class="iconfont icon-copy" />
          <span>体验链接(1天)</span>
        </div>
      </div>
    </div>
    <div v-if="handlerDialogShow" class="handler-dialog" :style="dialogPosition">
      <div class="title">
        <i class="el-icon-s-tools" />
        <span>生成SuperAPI联调配置</span>
      </div>
      <div class="btns">
        <div>
          <span class="iconfont icon-lianjie" />
          <span @click="handleDebug">启动编辑平台</span>
        </div>
        <div>
          <span class="iconfont icon-erweima" />
          <span>生成二维码</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import SceneTemplateDrawer from './components/SceneTemplateDrawer.vue'
  import SceneCard from '../market/components/SceneCard.vue'

  import {
    hasPermission
  } from '@/utils/permission'
  import {
    findProjectList,
    deleteProject,
    getProjectTypes,
    debugProject,
    previewProject
  } from '@/api/biz/project'
  import {
    isOk
  } from '@/utils/request'
  export default {
    name: 'Project',
    components: {
      SceneTemplateDrawer,
      SceneCard
    },
    data() {
      return {
        loading: false,
        baseUrl: process.env.VUE_APP_BASE_API,
        queryForm: {
          keywords: undefined
        },
        page: {
          cur: 1,
          limit: 50,
          total: 0
        },
        tableData: [],
        editDrawer: {
          visible: false,
          type: '0',
          data: {}
        },
        previewDrawer: {
          visible: false,
          type: '0',
          data: {}
        },
        shareDrawer: {
          visible: false,
          type: '0',
          data: {}
        },
        debugDrawer: {
          visible: false,
          type: '0',
          data: {}
        },
        templateDrawer: {
          visible: false,
          type: '0',
          data: {}
        },
        value: '',
        maskShow: false,
        infoDialogShow: false,
        handlerDialogShow: false,
        position: {
          x: 0,
          y: 0
        },
        mode: '',
        projectInfo: {}
      }
    },
    computed: {
      dialogPosition: function() {
        if (this.mode === 'info') {
          return (
            'top:' + (this.position.y - 20) + 'px;left:' + (this.position.x - 50) + 'px;'
          )
        } else {
          return (
            'top:' + (this.position.y + 15) + 'px;left:' + (this.position.x - 50) + 'px;'
          )
        }
      }
    },
    created() {
      this.load()
    },
    methods: {
      indexMethod(index) {
        return index + 1
      },
      onQuerySubmit(event) {
        this.load()
      },
      onReset(event) {
        this.queryForm.keywords = undefined
        this.queryForm.status = ''
        this.load()
      },
      load() {
        this.loading = true
        findProjectList({
            cur: this.page.cur,
            limit: this.page.limit,
            keywords: this.queryForm.keywords
          })
          .then((rsp) => {
            if (isOk(rsp)) {
              const _data = rsp.result
              this.page.total = _data.totalRow
              _data.list.forEach((item) => {
                item['url'] = this.baseUrl + '/biz/scene/thumbnail/' + item.sceneId
              })
              this.tableData = _data.list
              this.loading = false
            }
          })
          .catch((err) => {
            console.log(err)
          })
          .finally(() => {
            this.loading = false
          })
      },
      handleCurrentChange(cur) {
        this.page.cur = cur
        this.load()
      },
      handleAdd: function(e) {
        this.templateDrawer.visible = true
        this.templateDrawer.type = '0'
      },
      handleEdit: function(data) {
        this.editDrawer.visible = true
        this.editDrawer.type = '1'
        this.editDrawer.data = data
      },
      handlePreview: function(data) {
        this.previewDrawer.visible = true
        this.previewDrawer.type = '1'
        this.previewDrawer.data = data
      },
      handleShare: function(data) {
        this.shareDrawer.visible = true
        this.shareDrawer.type = '1'
        this.shareDrawer.data = data
      },
      close: function(e) {
        this.templateDrawer.visible = false
        this.templateDrawer.data = {}

        this.editDrawer.visible = false
        this.editDrawer.data = {}
        this.previewDrawer.visible = false
        this.previewDrawer.data = {}
        this.shareDrawer.visible = false
        this.shareDrawer.data = {}

        this.debugDrawer.visible = false
        this.debugDrawer.data = {}

        this.load()
      },
      handleDelete: function(data) {
        this.$confirm('确认删除【' + data.name + '】吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          deleteProject({
              id: data.id
            })
            .then((response) => {
              this.$message({
                message: '删除成功',
                type: 'success',
                duration: 500
              })
              this.load()
            })
            .catch((err) => {
              console.log(err)
            })
            .finally(() => {
              this.loading = false
            })
        })
      },
      hideMask: function() {
        this.maskShow = false
        this.infoDialogShow = false
        this.handlerDialogShow = false
      },
      showMask: function(index, item) {
        this.maskShow = true
        this.position.y = document
          .getElementsByClassName(index)[0]
          .getBoundingClientRect().top
        this.position.x = document
          .getElementsByClassName(index)[0]
          .getBoundingClientRect().left
        this.projectInfo = item
      },
      changeMode: function(param) {
        this.mode = param
        if (this.mode === 'info') {
          this.infoDialogShow = true
        } else {
          this.handlerDialogShow = true
        }
      },
      toSubsystem:function(data){
        this.$store.commit('subsystem/SET_SUB_ROJECT', {projectId:data.id,projectName:data.name});
        this.$router.push('/subsystem')
      },
      handleCopy: function() {
        var copyContent = document.createElement('input')
        copyContent.value = this.projectInfo.id
        document.body.appendChild(copyContent)
        copyContent.select() // 选择对象
        document.execCommand('Copy') // 执行浏览器复制命令
        this.$message.success('复制成功！')
        copyContent.remove()
      },
      handlePreview: function(id) {
        previewProject({
            projectId: id
          })
          .then((rsp) => {
            if (isOk(rsp)) {
              const _data = rsp.result
              const info = {
                url: _data.url,
                id: _data.project.id,
                sceneId: _data.project.sceneId,
                resX: _data.scene.resX,
                resY: _data.scene.resY,
                handler: 'preview332530'
              }
              this.$store.commit('scene/setIframeShow', true)
              this.$store.commit('scene/setSceneInfo', info)
            }
          })
          .catch((err) => {
            console.log(err)
          })
      },
      handleDebug: function() {
        // console.log('======', this.projectInfo.id)
        debugProject({
            projectId: this.projectInfo.id
          })
          .then((rsp) => {
            if (isOk(rsp)) {
              const _data = rsp.result
              // console.log('debug', _data)
              const info = {
                url: _data.url,
                id: _data.project.id,
                sceneId: _data.project.sceneId,
                resX: _data.scene.resX,
                resY: _data.scene.resY,
                handler: 'debug332530'
              }
              this.$store.commit('scene/setIframeShow', true)
              this.$store.commit('scene/setSceneInfo', info)
            }
          })
          .catch((err) => {
            console.log(err)
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .app-container {
    height: calc(100vh - 130px);
    position: relative;

    .container {
      position: absolute;
      z-index: 1;

      .sence-container {
        height: calc(100vh - 130px);
        padding-bottom: 80px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
        align-content: flex-start;
        overflow: auto !important;
      }
    }

    .maskAll {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 2000;
    }

    .info-dialog {
      position: absolute;
      width: 300px;
      height: 170px;
      background-color: #fff;
      border: 1px solid #c4c2c2;
      border-radius: 3px;
      z-index: 2001;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      user-select: none;

      >div {
        height: 18px;
        margin-top: 15px;
        margin-left: 10px;
        color: #777777;
        font-size: 14px;

        >span:first-child {
          margin-right: 14px;
        }
      }

      .btns {
        height: 28px;
        width: 90%;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        align-item: center;

        >div {
          width: 110px;
          height: 100%;
          background: rgb(6, 189, 174);
          border-radius: 30px;
          color: #fff;
          font-size: 14px;
          display: flex;
          align-items: center;
          justify-content: center;

          &:hover {
            cursor: pointer;
          }
        }
      }

      &::after {
        content: '';
        width: 10px;
        height: 10px;
        position: absolute;
        top: -6px;
        left: 50%;
        background: #fff;
        border-left: 1px solid #c4c2c2;
        border-top: 1px solid #c4c2c2;
        transform: rotate(45deg);
      }
    }

    .handler-dialog {
      position: absolute;
      width: 300px;
      height: 100px;
      padding: 10px;
      background-color: #fff;
      border: 1px solid #c4c2c2;
      border-radius: 3px;
      z-index: 2001;

      .title {
        color: #555;

        .el-icon-s-tools {
          font-size: 14px;
        }

        >span {
          font-size: 14px;
          font-weight: 900;
          margin-left: 2px;
        }
      }

      .btns {
        height: 28px;
        width: 90%;
        margin-top: 15px;
        display: flex;
        justify-content: space-between;
        align-item: center;

        >div {
          width: 110px;
          height: 100%;
          background: rgb(6, 189, 174);
          border-radius: 30px;
          color: #fff;
          font-size: 14px;
          display: flex;
          align-items: center;
          justify-content: center;

          &:hover {
            cursor: pointer;
          }
        }
      }

      &::after {
        content: '';
        width: 10px;
        height: 10px;
        position: absolute;
        top: -6px;
        left: 50%;
        background: #fff;
        border-left: 1px solid #c4c2c2;
        border-top: 1px solid #c4c2c2;
        transform: rotate(45deg);
      }
    }
  }
</style>
